<template>
  <div>
    <!-- <div class="box">

    </div> -->
    <!-- <el-row>
      <el-button type="primary" class="clockBt">进行签到打卡</el-button></el-row
    > -->
    <el-row>
      <el-col :sm="12" :lg="6" v-show="sucessStatus" id="pageshow1" >
        <el-result
          icon="success"
          title="成功提示"
          subTitle="您好，您已经完成打卡"
        >
        </el-result>
      </el-col>

      <el-col :sm="12" :lg="6" class="pageshow2" v-show="noclockStatus">
        <el-result icon="error" title="错误提示" subTitle="您好，请进行打卡">
          <template slot="extra">
            <el-button
              type="danger"
              size="medium"
              class="bt2"
              @click="UserToClock"
              >立即打卡</el-button
            >
          </template>
        </el-result>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { judgeIfClock, toClock } from "@/api/service/clockInfo";
export default {
  data() {
    return {
      sucessStatus: false,
      noclockStatus: false,
    };
  },
  methods: {
    open2() {
      this.$message({
        message: "您好，今日已打卡",
        type: "success",
      });
    },
    open4() {
      this.$message({
        message: "您好，打卡成功",
        type: "success",
      });
    },
    open5() {
      this.$message({
        message: "对不起，打卡失败",
        type: "success",
      });
    },
    open3() {
      this.$message.error("对不起，今日未打卡");
    },
    UserToClock() {
      toClock().then((response) => {
        if (response.code == 200) {
          this.open4();
          this.myCore();
            this.noclockStatus = false;
        } else {
          this.open5();
        }
      });
    },
    myCore(){
      judgeIfClock().then((response) => {
      console.log(response.data.minecode);
      if (response.data.minecode == 200) {
        console.log("已打卡");
        this.open2();
        this.sucessStatus = true;
      }
      if (response.data.minecode == 500) {
        console.log("未打卡");
        this.open3();
        this.noclockStatus = true;
      }
    });
    }
  },
  mounted() {
    this.myCore()
    // judgeIfClock().then((response) => {
    //   console.log(response.data.minecode);
    //   if (response.data.minecode == 200) {
    //     console.log("已打卡");
    //     this.open2();
    //     this.sucessStatus = true;
    //   }
    //   if (response.data.minecode == 500) {
    //     console.log("未打卡");
    //     this.open3();
    //     this.noclockStatus = true;
    //   }
    // });
  },

};
</script>

<style>
#pageshow1 {
  margin-left: 5%;
  margin-top: 5%;
}
.pageshow2 {
  margin-left: 5%;
  margin-top: 5%;
}
bt2 {
  width: 120px;
}
</style>
